import React from "react";
import * as echarts from 'echarts'
import shanxi from './../../mapjson/shanxi.json'

class ShanxiMap extends React.Component {
    componentDidMount = () => {
        //初始化echarts容器
        let myEcharts = echarts.init(document.getElementById('echartsMap'))
        //注册地图
        echarts.registerMap('shanxiMap', shanxi)
        //绘制地图的参数
        let option = {
            title: {
                text: '山西',
                textStyle: {
                    color: '#fff'
                }
            },
            series: {
                type: 'map',
                map: 'shanxiMap',
                zoom: 1.2,
                itemStyle: {
                    borderWidth: .4,        //区域边框的宽度
                    borderColor: '#fff',  //区域边框的颜色
                    areaColor: '#0066FF'    //区域的背景颜色
                },
                data: [{ name: '太原市', selected: true }]
            }
        }
        //绘制echarts地图
        myEcharts.setOption(option)
        myEcharts.on('click', params => {
            //字符串截取（去掉‘市’）
            let cityName = params.name
            cityName = cityName.substring(0, 2)
            // console.log(cityName)
            this.props.messageShanxiMap(cityName)
        })
    }
    render() {
        return (
            <>
                <div id="echartsMap" className="myMap"></div>
            </>
        )
    }
}

export default ShanxiMap